<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>南方电网PG标准机房动环监控信息化系统V1.0</title>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" th:href="@{/static/layuiadmin/layui/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{/static/layuiadmin/style/admin.css}" media="all">
    <script type="text/javascript" th:src="@{/static/js/jquery.min.js}"></script>
</head>
<body>
<form class="layui-form">
    <table id="deviceList" lay-filter="deviceList"></table>
</form>
<script th:src="@{/static/layuiadmin/layui/layui.js}"></script>
<script>
    var child;
    layui.use(['form', 'layer', 'table', 'upload'], function () {
        var form = layui.form,
            layer = parent.layer === undefined ? layui.layer : top.layer,
            $ = layui.jquery,
            table = layui.table;


        //列表
        var tableIns = table.render({
            elem: '#deviceList',
            url: '/device/getDevices',
            cellMinWidth: 95,
            page: true,
            height: 'full-110',
            limits: [10, 20, 30],
            limit: 20,
            id: "deviceList",
            cols: [
                [
                    {type: "checkbox", fixed: "left", width: 50,height:150},
                    {field: 'deviceId', title: '设备ID', minWidth: 100, align: "center",height:150}, {
                    field: 'deviceName',
                    title: '设备名称',
                    minWidth: 100,
                    align: "center",height:150
                }, {field: 'deviceType', title: '设备类型', minWidth: 100, align: "center",height:150}, {
                    field: 'deviceState',
                    title: '设备状态',
                    minWidth: 100,
                    align: "center",height:150
                }, {field: 'onlineTime', title: '设备上线时间', minWidth: 100, align: "center",height:150},
                    {field: '', title: '操作', minWidth: 100, align: "center",toolbar:"#bar",height:150}
                ]
            ]
        });

        table.on('tool(deviceList)',function (obj) {
            var data = obj.data;
            if (obj.event === 'detail'){
                layer.open({
                    type: 2,
                    skin: 'layui-layer-demo', //样式类名
                    title: '设备数据',
                    closeBtn: 1, //不显示关闭按钮
                    area: ['893px', '600px'],
                    shadeClose: true, //开启遮罩关闭
                    content: 'deviceInfo?id='+data.deviceId,
                    success: function (layero, index) {
                        // 获取子页面的iframe
                        var iframe = window['layui-layer-iframe' + index];
                        console.log(iframe)
                        // 向子页面的全局函数child传参
                    }
                });
            }
        })
    })
</script>
<script type="text/html" id="bar">
    <button class="layui-btn layui-btn-normal layui-btn-sm" lay-event="detail">查看数据</button>
</script>
<script>

    $(function () {
        $.ajax({
            //请求方式
            type: "Get",
            //请求的媒体类型
            contentType: "application/json;charset=UTF-8",
            //请求地址
            url: "/model/getData",
            cache: false,
            //请求成功
            success: function (res) {
                if (res != null) {
                    $("#siteId").val(res.siteId);
                    $("#siteName").val(res.siteName);
                }
            }
        });
    })

    $(function () {
        $.ajax({
            //请求方式
            type: "Get",
            //请求的媒体类型
            contentType: "application/json;charset=UTF-8",
            //请求地址
            url: "/model/getModel",
            cache: false,
            //请求成功
            success: function (res) {
                res.forEach(function (data) {
                    $("#table").append("<tr style='text-align: center;height: 40px'><td>" + data.key + "</td> <td >" + data.value + "</td><td ><button click=''>删除</button></td> </tr>")
                })
            }
        });
    })

    function submit() {
        var obj = {};
        obj.siteId = $("#siteId").val();
        obj.siteName = $("#siteName").val();
        $.ajax({
            //请求方式
            type: "POST",
            //请求的媒体类型
            contentType: "application/json;charset=UTF-8",
            //请求地址
            url: "/model/update",
            //数据，json字符串
            data: JSON.stringify(obj),
            //请求成功
            success: function (res) {
                alert(res);
            }
        });
    }

    function del(val) {
        $.ajax({
            //请求方式
            type: "POST",
            //请求的媒体类型
            contentType: "application/json;charset=UTF-8",
            //请求地址
            url: "/model/delete",
            //数据，json字符串
            data: val,
            //请求成功
            success: function (res) {
                // alert(res);
            }
        });
    }

    function addModel() {
        var obj = {};
        obj.model = $("#model").val();
        obj.dataVal = $("#dataVal").val();
        $.ajax({
            //请求方式
            type: "POST",
            //请求的媒体类型
            contentType: "application/json;charset=UTF-8",
            //请求地址
            url: "/model/addModel",
            //数据，json字符串
            data: JSON.stringify(obj),
            //请求成功
            success: function (res) {
                alert(res)
                location.reload();
            }
        });
    }
</script>
</body>
</html>